<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>

<body>
    <!-- 这是导航栏 -->
    <div class="nav">
        <img src="image/logo.png" alt="logo">
        <span>我的博客系统</span>
        <!-- 空白元素, 用来占位置 -->
        <div class="spacer"></div>
        <a href="blog_list.html" class="list">主页</a>
        <a href="#" id="logout" class="logout">退出</a>
        <a href="blog_register.html">注册</a>
    </div>
    <!-- 这里的 .container 作为页面的版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="left">
            <!-- 表示整个用户信息区域. -->
            <div class="card">
                <img src="./image/作者头像.jpg" alt="作者头像" id="authorphoto">
                <h3></h3>
                <h6></h6>
                <h4 id="reader"></h4>
                <h4 id="gooder"></h4>
                <a target="_blank" id="git">Gitee地址</a>
                <a target="_blank" id="hisArticle">他/她的文章</a>
                <input type="button" value="请为这篇文章点赞" id="good" class="good">
            </div>
        </div>
        <!-- 右侧内容详情 -->
        <div class="right">
            <!-- 使用这个 div 来包裹整个博客的内容详情 -->
            <div class="blog-content">
                <!-- 博客标题 -->
                <h2></h2>
                <!-- 博客的发布时间 -->
                <div class="date"></div>
                <!-- 博客正文 -->
                <div class="content" id="content" style="background-color: transparent;">
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        //处理点赞功能
        let good = document.querySelector('#good');
        good.onclick = function () {
            jQuery.getJSON("blog/good" + location.search, {},
                function (data) {
                    if (data.status == 1) {
                        alert("感谢您对这篇文章的支持~");
                        good.setAttribute("disabled", true);
                    } else if (data.status == -1) {
                        alert(data.message);
                        good.setAttribute("disabled", true);
                    }
                }
            )
        }
        //处理退出登录请求
        let logoutD = document.querySelector(".logout");
        logoutD.onclick = function () {
            jQuery.getJSON("login/out", {},
                function (data) {
                    if (data.status == 1) {
                        alert(data.message);
                        window.location.href = 'login.html'
                    }
                }
            )
        }
        // 使用ajax请求，向服务器获取当前文章内容
        jQuery.getJSON("blog/TextMse" + location.search, {},
            function (obj) {
                buildBlog(obj.data);
            }
        )
        //根据服务返回的JSON对象，来构造出页面的内容
        function buildBlog(blog) {
            let rightDiv = document.querySelector(".container .right");
            //更新博客标题
            let titleDiv = document.querySelector('.blog-content h2');
            titleDiv.innerHTML = blog.title;
            //更新发布日期
            let dateDiv = document.querySelector('.blog-content .date');
            dateDiv.innerHTML = blog.postTime;
            //设置博客正文
            // let contentDiv = document.querySelector('.blog-content .content');
            if (blog.isYourBlog == 1) {
                let navDiv = document.querySelector('.nav');
                let deleteA = document.createElement('a');
                deleteA.innerHTML = '删除';
                deleteA.href = '#';
                deleteA.onclick = deletaBlog;
                navDiv.appendChild(deleteA);
                // navDiv.removeChild(".list");
                let updateA = document.createElement('a');
                updateA.innerHTML = '修改';
                updateA.href = 'blog_edit.html?blogId=' + blog.id;
                navDiv.appendChild(updateA);
            }
            editormd.markdownToHTML('content', {
                markdown: blog.content,
            })
        }
        //触发删除文章的请求
        function deletaBlog() {
            jQuery.getJSON("blog/deleteBlog" + location.search, {},
                function (obj) {
                    if (obj.status == 1) {
                        alert(obj.message);
                        window.location.href = 'blog_list.html'
                    }
                }
            )
        }

        function formatDate(timeStampMS) {
            //时间戳=》格式化
            let date = new Date(timeStampMS);
            let year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate(),
                hour = date.getHours(),
                min = date.getMinutes(),
                sec = date.getSeconds();
            let newTime = year + '-' +
                (month < 10 ? '0' + month : month) + '-' +
                (day < 10 ? '0' + day : day) + ' ' +
                (hour < 10 ? '0' + hour : hour) + ':' +
                (min < 10 ? '0' + min : min) + ':' +
                (sec < 10 ? '0' + sec : sec);
            return newTime;
        }
        //使用ajax请求，向服务器获取当前文章作者的信息
        jQuery.getJSON("blog/AuthorMse" + location.search, {},
            function (obj) {
                buildUser(obj.data);
            })

        let approveButton = document.createElement("input");
        approveButton.type = "button";
        approveButton.value = "✔ 审核通过";
        approveButton.id = "approve";
        approveButton.className = "good";
        approveButton.onclick = approve;
        let approveButton1 = document.createElement("input");
        approveButton1.type = "button";
        approveButton1.value = "✘ 审核不通过";
        approveButton1.id = "approve1";
        approveButton1.className = "good";
        approveButton1.onclick = approve1;



        function buildUser(user) {
            //根据服务器返回的用户信息，来修改页面的显示内容
            let h3 = document.querySelector('.card>h3');
            h3.innerHTML = user.username;
            let h6 = document.querySelector('.card>h6');
            h6.innerHTML = user.signature;
            let read = document.querySelector('#reader');
            read.innerHTML = user.reader + " 被访问";
            let good = document.querySelector('#gooder');
            good.innerHTML = user.gooder + " 获赞";
            let gitee = document.querySelector('#git');
            gitee.href = user.gitee;
            let photo = document.querySelector("#authorphoto");
            photo.src = user.img;
            let hisArticle = document.querySelector("#hisArticle");
            hisArticle.href = 'blog_list.html?status=1&userId=' + user.userid;
            if (user.isApprove == 1) {
                //表示为审核文章
                let leftDiv = document.querySelector('.container .left .card')
                leftDiv.appendChild(approveButton);
                leftDiv.appendChild(approveButton1);
            }
        }

        function approve() {
            jQuery.getJSON("blog/check" + location.search + "&result=ok", {},
                function (data) {
                    if (data.status == 1) {
                        alert(data.message);
                    } else {
                        alert("处理失败~");
                    }
                }
            )
        }

        function approve1() {
            jQuery.getJSON("blog/check" + location.search + "&result=no", {},
                function (data) {
                    if (data.status == 1) {
                        alert(data.message);
                    } else {
                        alert("处理失败~");
                    }
                }
            )
        }

        function renderMD() {
            let contentDiv = document.querySelector('#content');
            let markdown = contentDiv.innerHTML;
            //要把contentDiv里的内容先清空
            contentDiv.innerHTML = '';
            //替换
            editormd.markdownToHTML('content', {
                markdown: markdown
            });
        }
        renderMD();
    </script>
</body>

</html>